<template>
  <van-collapse-item title="会议日程" name="speaker">
    <!-- 主席 -->
    <speaker-item
      ref="refZx"
      :speaker-item="speakerItemObj"
      role="1"
      @update="updateSpeaker"
    ></speaker-item>

    <!-- 讲者 -->
    <speaker-item
      ref="refJz"  
      :speaker-item="speakerItemObj"
      role="2"
      @update="updateSpeaker"
    ></speaker-item>

    <!-- 讨论 -->
    <speaker-item
      ref="refTl"  
      :speaker-item="speakerItemObj"
      role="3"
      @update="updateSpeaker"
    ></speaker-item>
  </van-collapse-item>
</template>

<script setup>
  import { ref } from 'vue'
  import SpeakerItem from './speaker-item.vue'

  const emits = defineEmits('update')

  const refZx = ref();
  const refJz = ref();
  const refTl = ref();
  const schedules = ref([])
  const speakerItemObj = {
    speakers: [{
      speakerId: '',
      speakerAppearanceFeeAftertax: '',
      speakerName: '',
    }],
    topic: '',
    startTime: '',
    endTime: '',
  }

  function updateSpeaker () {
    schedules.value = [
      refZx.value.params,
      refJz.value.params,
      refTl.value.params,
    ]
    emits('update', schedules.value)
  }

  defineExpose({
    getParams: () => {
      let list = []
      schedules.value.forEach(item => {
        list = [...list, ...item]
      })
      return list
    },

    setParams (detail) {
      const zx = []
      const tl = []
      const jz = []
      detail.schedules.forEach(item => {
        switch(item.speakers[0].speakerRole) {
          case 1:
            zx.push(item);
            break;
          case 2:
            jz.push(item);
            break;
          case 3:
            tl.push(item);
            break;
        }
      })

      if (zx.length) refZx.value.setParams(zx)
      if (jz.length) refJz.value.setParams(jz)
      if (tl.length) refTl.value.setParams(tl)
    }
  })
</script>